<template>
  <div class="rank">
    <div class="container">
      <table class="table header" border="0">
        <colgroup>
          <col width="150vw">
          <col width="150vw">
          <col width="150vw">
          <col width="150vw">
          <col width="150vw">
        </colgroup>
        <thead>
          <tr>
            <td><div>排名</div></td>
            <td><div>头像</div></td>
            <td><div>用户名</div></td>
            <td><div>积分</div></td>
            <td><div>加入时间</div></td>
          </tr>
        </thead>
      </table>
      <table class="table body" border="0">
        <colgroup>
          <col width="150vw">
          <col width="150vw">
          <col width="150vw">
          <col width="150vw">
          <col width="150vw">
        </colgroup>
        <tbody>
        <tr v-for="(data, index) in users" :key="index">
          <td>
            <div v-if="index === 0">
              <img src="../assets/rank/rank-one.png" class="rank-image" alt="">
            </div>
            <div v-else-if="index === 1">
              <img src="../assets/rank/rank-two.png" class="rank-image" alt="">
            </div>
            <div v-else-if="index === 2">
              <img src="../assets/rank/rank-three.png" class="rank-image" alt="">
            </div>
            <div v-else class="rank-num">{{ index + 1 }}</div>
          </td>
          <td v-if="data.avatar"><div class="avatar" :style="`background-image: url(${baseURL}${data.avatar});`"></div></td>
          <td v-if="data.username"><div>{{ data.username }}</div></td>
          <td v-if="data.point"><div>{{ data.point }}</div></td>
          <td v-if="data.date_joined"><div>{{ new Date(data.date_joined).format('yyyy年MM月dd日 hh:mm:ss') }}</div></td>
          <td v-else colspan="5"><div style="line-height: 2.6vw">虚位以待</div></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Rank',
  data() {
    return {
      users: [],
      baseURL: this.$request.baseURL
    };
  },
  created() {
    this.get_rank();
  },
  methods: {
    get_rank() {
      this.$request.exec('get', 'rank', {}, this).then((res) => {
        let data = res.data.list;
        if (data.length < 10) for(let i = data.length;i<10;i++) data.push({})
        this.users = data;
      }).catch((res) => {
        this.$message.error(res.data.msg)
      })
    }
  }
};
</script>

<style scoped>

.container {
  background-image: url("../assets/background.png");
  background-position: center center;
  background-size: cover;
  position: relative;
  padding: 2vw 7vw;
}

* {
  color: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tr td {
  text-align: center;
  font-size: 1vw;
}

thead {
  background: url("../assets/rank/thead.png") 0 0 / 100% 100%;
}

thead tr td {
  padding: 1vw;
}

thead tr td div {
  padding: 2.3vw 3vw 1.7vw 3vw;
  font-size: 1.2vw;
}

.body {
  margin-top: 1vw;
  margin-left: 0.4vw;
  width: calc(100% - 0.4vw);
}

tbody {
  border: 1px solid #043a68;
  background: #041e5061;
}

tbody tr {
  border-bottom: 1px solid #043a68;
  cursor: pointer;
}

tbody tr:hover {
  background: #031841ad;
}

tbody tr td {
  padding: .6vw;
}

.avatar {
  display: inline-block;
  width: 2.6vw;
  height: 2.6vw;
  border-radius: 100%;
  overflow: hidden;
  background-size: 110%;
  background-position: center center;
  border: 0.15vw solid #3275c4;
  margin-right: 1vw;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rank-image {
  height: 2.6vw;
}

.rank-num {
  font-style: italic;
  font-size: 1.2vw;
}
</style>
